////
/// Components
/// Plate
////

@import 'utils/shared/layout';
@import 'keyframes';
@import 'props';

.PlateWrapper {
  @include centered-width($plate-max-size);
  position: relative;
  padding-top: 100%;
  height: 0;

  @media screen and (min-width: get-breakpoint('720p', wide)) {
    padding-top: 0;
    height: $plate-max-size;
  }
}

.Plate {
  @include position-cover;
  height: 0;
  color: white;
  // required for more accurate :hover hitbox
  border-radius: 50%;
}

.PlateShadowWrapper {
  @include position-cover;
  pointer-events: none;
}

.PlateShadow {
  width: 100%;
  height: 100%;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: get-color(coal, dark);
    border-radius: 50%;
  }
}

.PlateContent {
  @include position-cover;
  @include flex-center;
  background-color: get-color(coal, dark);
  border-radius: 50%;

  .Heading {
    margin-bottom: 0;
  }
}

@import 'variants';
